<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="/Public/mui/css/mui.min.css">
		<style type="text/css">
			body{
				background-color: #fff;
			}
			.mui-content {
				background-color: #fff;
				color: #666;
				margin-bottom: 45px;
			}
			.detail-header-img{
				width: 100%;
				overflow: hidden;
			}
			.detail-header-img img{
				width: 100%;
				height: auto;
			}
			.goods-introduce {
				padding: 5px 5px 10px 5px;
				color: #666;
			}
			.goods-introduce .goods-price{
				color: #ea1717 !important;
			}
			
			.footer {
				background-color: #fff;
				position: fixed;
				bottom: 0px;
				height: 40px;
				width: 100%;
				border-top: 1px #d4d0d0 solid;
			}
			.goods-detail {
				padding: 10px;
			}
			.goods-detail img{
				width: 100%;
				height: auto;
			}
		</style>
	</head>

<body>
<header class="mui-bar mui-bar-nav" style="background-color: #36373C;color: #fff">
	<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
	<h1 id="title" class="mui-title" style="color: #fff;">商品详情</h1>
</header>
<div class="mui-content">
	<!--数据列表-->
    <div id="" class="detail-header-img">
    	<img src="{$info.goods_img}"/>
    </div>	
    <div id="" class="goods-introduce" style="color: #666;">
    	<h3 class="goods-price">￥{$info.price}</h3>
    	<h4>【{$info.goods_name}】</h4>
    	<p style="margin-bottom: 0px;">{$info.goods_description}</p>
    </div>
   	<div id="" style="border-top: 1px #eae3e3 solid"></div>
   	<div id="" class="goods-detail">
   		{$info.content}
   	</div>
</div>
<div id="" class="footer">
	<div class="mui-numbox" style="height: 30px;width: 113px;top: 50% ;transform: translateY(-50%);" data-numbox-min='1'>
	  <!-- "-"按钮，点击可减小当前数值 -->
	  <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
	  <input class="mui-numbox-input" type="number" />
	  <!-- "+"按钮，点击可增大当前数值 -->
	  <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
	</div>

	<button type="button" class="mui-btn mui-btn-warning" data-loading-text="购买中" style="position: absolute;right: 0px;height: 40px;" id="buy-goods" goods-id = "{$info.id}">立即购买</button>
</div>
<script src="/Public/mui/js/mui.min.js" type="text/javascript" charset="utf-8"></script>

<script>
(function () {
	mui.init();
	mui('#buy-goods')[0].addEventListener('tap', function() {
        //提示
		var id = this.getAttribute('goods-id');
		var num = mui('.mui-numbox').numbox().getValue();
		mui.confirm('请问您确定购买该商品吗？', '购买商品',['否', '是'], function(e) {
			if (e.index == 1) {
				mui('#buy-goods').button('loading');
				send({
					id:id,
					num:num
				});
			} else{
				
			}
		}, 'div')
		
    });
	
	function send(data) {
		mui.ajax('/index.php/Home/Shop/buyGoods',{
			data:data,
			dataType:'json',//服务器返回json格式数据
			type:'post',//HTTP请求类型
			timeout:10000,//超时时间设置为10秒；              
			success:function(res){
				mui.toast(res.info);
				mui('#buy-goods').button('reset');
			},
			error:function(xhr,type,errorThrown){
				alert('程序出错');
			}
		});
	}
})()
	
</script>
</body>

</html>